﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmailFillter.aspx.cs" Inherits="famails.BackEnd.page.EmailFillter" MasterPageFile="~/Master.Master" %>
<%@ Register Assembly="CollectionPager" Namespace="SiteUtils" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width:100%;padding:10px;">
        <!--start content 01-->
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;padding:0px;margin-bottom:10px;">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
               Phân loại email
            </div>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
                <asp:Panel Visible="false" ID="pnError" runat="server">
                    <div class="error-box round">
                        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
                <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                    <div class="confirmation-box round">
                        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
            </div>
            <asp:Panel ID="pnSearch" runat="server">
            <div class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <p>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Theo tên</label>
                        <asp:TextBox ID="txtName" runat="server" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" ></asp:TextBox>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <p>
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Nhóm email</label>
                            <asp:DropDownList ID="drlSubGroup" runat="server" AutoPostBack="false" CssClass="form-control" style="border:1px solid #333;border-radius:0px;">
                                <asp:ListItem Value="0">All</asp:ListItem>
                            </asp:DropDownList>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <p>
                         
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Theo số điện thoại</label>
                        <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control" style="border:1px solid #333;border-radius:0px;"></asp:TextBox>
                    </p>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <p>
                         
                        <label for="simple-input" style="font-weight: bolder; text-transform: none">
                            Theo email</label>
                        <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" style="border:1px solid #333;border-radius:0px;"></asp:TextBox>
                    </p>
                </fieldset>
            </div>

            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
                <fieldset>
                            <div id="btnAdd" style="float:left;border:1px solid #fff;background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;" class="btn col-md-3 col-xs-6 col-sm-4 col-lg-2">
                                <span style="margin-right:10px;" class="fa fa-plus"></span> Thêm vào
                            </div>
                            <div id="btnSearch" style="float:left;border:1px solid #fff;background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;" class="btn col-md-3 col-xs-6 col-sm-4 col-lg-2">
                                <span style="margin-right:10px;" class="fa fa-mail-forward"></span> Lọc dữ liệu
                            </div>
                </fieldset>
            </div>
            </asp:Panel>
        <style>
                    #contentjqxgrid {
                        width:100% !important;
                    }
                    #pagerjqxgrid {
                        width:100% !important;
                    }
                    #columntablejqxgrid {
                        width:100% !important;
                    }
            .jqx-grid-header {
                        width:100% !important;
            
            }
         </style>
         <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:0px;">
            <div id='jqxWidget' style="width:100% !important;font-size: 13px; font-family: Verdana; float: left;">
                <div id="jqxgrid" style="width:100% !important;">
                </div>
            </div>
            </div>
        </div>
    </div>
        <script>
        function checkAll() {
            var checked = !$(this).data('checked');
            $('input:checkbox').prop('checked', checked);
            $(this).data('checked', checked);
        }
        </script>

        <script>
            $('#ctl00_ctl00_ContentPlaceHolder1_dtlCustomer_ctl00_chkAll:checkbox').change(function () {
            if ($(this).attr("checked")) $('input:checkbox').attr('checked', 'checked');
            else $('input:checkbox').removeAttr('checked');
            });
        </script>

    <script type="text/javascript">
        jQuery(function ($) {
            $("#btnAdd").click(function () {
                var rows = $("#jqxgrid").jqxGrid('selectedrowindexes');
                var selectedRecords = new Array();
                var ids = "";
                for (var m = 0; m < rows.length; m++) {
                    var row = $("#jqxgrid").jqxGrid('getrowdata', rows[m]);
                    var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "Id");
                    ids += id + ",";
                }
                if (ids == "") { alert('Qúy khách vui lòng chọn email để thêm vào danh sách!'); return; }
                var postValue = "{ids:'" + ids + "',groupid:" + $('#ContentPlaceHolder1_drlSubGroup').val() + "}";
                $.ajax({
                    type: "POST",
                    url: "EmailFillter.aspx/AddEmail",
                    data: postValue,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        alert(data.d);
                        $('#btnSearch').trigger('click');
                        // clears the selection.
                        $("#jqxgrid").jqxGrid('clearselection');

                    }
                });
            });
            $("#btnSearch").click(function () {
                $("#jqxgrid").jqxGrid('showloadelement');
                var postValue = "{name:'" + $('#ContentPlaceHolder1_txtName').val() + "',phone:'" + $('#ContentPlaceHolder1_txtPhone').val() + "',email:'" + $('#ContentPlaceHolder1_txtEmail').val() + "',group:" + $('#ContentPlaceHolder1_drlSubGroup').val() + "}";
                $.ajax({
                    type: "POST",
                    url: "EmailFillter.aspx/Search",
                    data: postValue,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Id', type: 'decimal' },
                        { name: 'Email', type: 'string' },
                        { name: 'Name', type: 'string' },
                          { name: 'Phone', type: 'string' },
                          { name: 'Gender', type: 'string' },
                          { name: 'Address', type: 'string' },
                          { name: 'Job', type: 'string' },
                          { name: 'Status', type: 'string' },
                        { name: 'BirthDay', type: 'date' },
                        { name: 'seleted', type: 'bool' }
                    ],
                    id: 'Id',
                    localdata: data,
                    pager: function (pagenum, pagesize, oldpagenum) {
                    }
                };
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        $("#jqxgrid").jqxGrid(
                        {
                            width: $('#jqxWidget').width(),
                            source: dataAdapter,
                            selectionmode: 'checkbox',
                            sortable: true,
                            pageable: true,
                            autoheight: true,
                            columnsresize: true,
                            columns: [
                              { text: 'Họ tên', datafield: 'Name' },
                              { text: 'Email', datafield: 'Email', cellsformat: 'D' },
                              { text: 'Số điện thoại', datafield: 'Phone', cellsformat: 'F2', cellsalign: 'right' },
                              { text: 'Giới tính' },
                              { text: 'Địa chỉ', datafield: 'Address' },
                              { text: 'Nghề nghiệp', datafield: 'Job' },
                              { text: 'Ngày sinh', datafield: 'BirthDay', cellsformat: 'dd/MM/yyyy' },
                              { text: 'Trạng thái', datafield: 'Status' }
                            ]
                        });

                    }
                });
            });
        });
    </script>
</asp:Content>

